<style scoped lang="scss">
.user-dynamic-list {
  width: 10rem;

  ul {
    @include flex-center;
    flex-direction: column;

    li {
      width: 9.4rem;
      padding: 0 .3rem;
      background-color: #161622;
      border-top: .05rem solid #252533;

      .follow-item-avatarNickname {
        width: 100%;
        height: .88rem;
        display: flex;
        align-items: center;
        margin-top: .2667rem;

        img {
          width: .8rem;
          height: .8rem;
          border-radius: 50%;
        }

        .follow-item-nickname {
          font-size: .3733rem;
          color: $color-white;
          margin-left: .1333rem;
        }
      }

      .follow-item-work {
        font-size: 14px;
        margin: 10px 0;
        color: #e8e8e9;
      }

      .follow-item-video {
        width: 6.64rem;
        height: 10.6667rem;
        background-color: #000;

        video {
          width: 100%;
          height: 100%;
        }
      }

      .follow-item-btn {
        width: 4.8rem;
        height: .6933rem;
        display: flex;
        justify-content: space-between;
        margin-top: .2667rem;
        color: #d5d5d5;

        span {
          display: flex;
          align-items: center;

          i {
            font-size: .6rem;
            transition: all .3s ease-in-out;
          }

          p {
            font-size: .4267rem;
            margin-left: .0667rem;
          }
        }
      }

      .follow-item-time {
        font-size: .2667rem;
        margin-bottom: .2667rem;
        color: #8b8c96;
        margin-top: .2667rem;
      }
    }

    li:nth-child(1) {
      border-top: none;
    }
  }

  .user-dynamic-list-buttom {
    width: 10rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    text-align: center;
    font-size: .3rem;
    color: #65676e;
    background-color: #161622;
    padding-bottom: 1.2667rem;
  }
}

.like-btn-active {
  color: $color-red;
  transition: all .3s ease-in-out;
}
</style>
<template>
  <div class="user-dynamic-list">
    <ul :ref="setFollowHeaderRef">
      <li v-for="item, index in currentVideo" :key="item.userId">
        <div class="follow-item">
          <!-- 头像昵称 -->
          <div class="follow-item-avatarNickname">
            <img :src="'http://43.138.15.137:3000' + item.Video.userAvatar" alt="">
            <div class="follow-item-nickname">@{{ item.Video.userNickname }}</div>
          </div>
          <!-- 作品文案 -->
          <div class="follow-item-work">
            <p>{{ item.Video.videoDesc }}</p>
          </div>
          <!-- 视频播放 -->
          <div class="follow-item-video">
            <video class="video-player" playsinline webkit-playsinline :ref="(el) => setVideoRef(el, index)"
              @click="toggleVideoPlay(index)">
              <source :src="item.Video.videoPath" type="video/mp4">
            </video>
          </div>
          <!-- 互动按钮 -->
          <div class="follow-item-btn">
            <span>
              <i class="iconfont icon-aixin1" @click="handleLike(item.Video.videoId, currentVideo, 'Video', item)"
                :class="{ 'like-btn-active': item.isLiked }"></i>
              <p>{{ item.WSLCNum.likeNum }}</p>
            </span>
            <span>
              <i class="iconfont icon-pinglun" @click="getCommentData(item.Video.videoId, item)"></i>
              <p>{{ item.WSLCNum.commentNum }}</p>
            </span>
            <span>
              <i class="iconfont icon-a-huaban1fuben37"></i>
              <p>{{ item.WSLCNum.shareNum }}</p>
            </span>
          </div>
          <!-- 时间 -->
          <div class="follow-item-time">2023-01-01</div>
        </div>
      </li>
    </ul>
    <div class="user-dynamic-list-buttom">
      <p>暂时没有更多了</p>
    </div>
  </div>
  <!-- 评论区 -->
  <CommentSection :showComment="showComment" :video="videoList" @close="isShow" :videoId="currentVideoId"
    @comment-success="getCommentData" />
</template>

<script setup>
import { useVideoPlayer } from "@/hooks/useVideoPlayer";
import { useVideoInteractions } from '@/hooks/useVideoInteractions';
import { useTemplateRef } from "@/hooks/useTemplateRef";
import CommentSection from '@/components/common/commentSection.vue';
import { getVideoComment } from '@/api/home/Home';
import { useSocketInteractions } from '@/hooks/useSocketInteractions'
const { videoRefs, setVideoRef, toggleVideoPlay, pauseAllVideos } = useVideoPlayer();
const { likeVideo } = useVideoInteractions();
const { templateRef: followHeaderRef, setTemplateRef: setFollowHeaderRef } = useTemplateRef();
const { sendLike } = useSocketInteractions()
const props = defineProps({
  currentVideo: {
    type: Array,
    required: true
  }
});

// 评论区
const showComment = ref(false);
// 视频数组
const videoList = ref([]);
let currentVideoId = ref(null);
// 请求评论区数据
async function getCommentData(videoId) {
  if (videoId) {
    currentVideoId.value = videoId;
  }
  try {
    const res = await getVideoComment(currentVideoId.value);
    console.log(res);
    if (res.code === 200) {
      videoList.value = res.data;
      showComment.value = true;
      console.log(videoList.value);
    }
  } catch (error) {
    console.error('获取评论失败:', error);
  }
};
// 处理点赞
const handleLike = (videoId, videoList, type, item) => {
  console.log('item:', type);
  let userId = null
  if (type === 'video') {
    userId = item.video.userId
  } else {
    userId = item.Video.userId
  }
  if (!userId) return
  sendLike({
    toUserId: userId
  })
  likeVideo(videoId, videoList, type);
};
// 关闭评论区
function isShow() {
  showComment.value = false;
}
</script>
